<template>
  <div class="article" v-if="model">
    <nav-bar></nav-bar>
    <div class="content">
      <div class="videos">
        <video controls="controls" :src="model.content"></video>
      </div>
      <!--            按钮app-->
      <div class="button">
        <a
          href="http://d.bilibili.com/download_app.html?preUrl=http%3A%2F%2Fm.bilibili.com%2Fvideo%2Fav796450032.html&schema=bilibili%3A%2F%2Fvideo%2F796450032%3Fpage%3D0&h5awaken=cHZpZD0wN0MxNjIyMi1BQ0IyLTRDQUEtOEZCMS1CMkYxRTQ3MjMzNDMxNTU4MTFpbmZvY183OTY0NTAwMzJfMTU5NTI0NTU5MDQ0NiZ1YT1Nb3ppbGxhJTJGNS4wJTIwKGlQaG9uZSUzQiUyMENQVSUyMGlQaG9uZSUyME9TJTIwMTFfMCUyMGxpa2UlMjBNYWMlMjBPUyUyMFgpJTIwQXBwbGVXZWJLaXQlMkY2MDQuMS4zOCUyMChLSFRNTCUyQyUyMGxpa2UlMjBHZWNrbyklMjBWZXJzaW9uJTJGMTEuMCUyME1vYmlsZSUyRjE1QTM3MiUyMFNhZmFyaSUyRjYwNC4xJmlzQXV0b09wZW49ZmFsc2UmYnNvdXJjZT1zZWFyY2hfc291Z28mJm9wZW5fYXBwX2Zyb21fdHlwZT1oNSZvcGVuX2FwcF91dWlkPUM5QTJBQjZBLUE4QUItNTNBNy01NTcxLURBMzVFRkUwMzZGNDEyMjk0aW5mb2Mmb3Blbl9hcHBfZ3JvdXBpZD0xJm9wZW5fYXBwX3VybD1odHRwcyUzQSUyRiUyRm0uYmlsaWJpbGkuY29tJTJGdmlkZW8lMkZCVjE3QzR5MWI3ZHkmb3Blbl9hcHBfYWRkaXRpb249JTdCJTIyc3BtaWQlMjIlM0ElMjIzMzMuNDAxLmNsaWNrLnBsYXllciUyMiUyQyUyMmdyb3VwX2lkJTIyJTNBMCU3RA%3D%3D"
        >
          App 内打开，流畅又高清
        </a>
      </div>
      <!--            下拉内容-->
      <van-collapse v-model="activeNames">
        <van-collapse-item>
          <template #title>
            <div v-if="model" class="name">
              <van-icon color="#fb7299" name="fire" />{{ model.name }}
            </div>
            <div class="detail">
              <img src="~assets/img/UP主_32.png" alt="" />
              <span v-if="model.userinfo" class="username">{{
                model.userinfo.name
              }}</span>
              <span>62.5万次观看</span>
              <span>12.8万弹幕</span>
              <span>{{ model.date }}</span>
            </div>
          </template>
          <div class="contentDown">
            <van-icon name="close" color="#FB4F6C" size="16px" />
            <span class="warning">
              未经作者授权禁止转载
            </span>
            <p>{{ model.name }}</p>
            <div class="tags">
              <span @click="$router.push('/home')"> 主页 </span> >
              <span> {{ model.category.title }} </span> >
              <span> 当前</span>
            </div>
            <div>
              <van-tag round color="#f4f4f4" text-color="black">热门</van-tag>
              <van-tag round color="#f4f4f4" text-color="black">自制</van-tag>
              <van-tag round color="#f4f4f4" text-color="black">UP主</van-tag>
              <van-tag round color="#f4f4f4" text-color="black">B站</van-tag>
              <van-tag round color="#f4f4f4" text-color="black">哈哈哈</van-tag>
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
      <div class="utils">
        <div class="utilsnei">
          <div class="icons">
            <div class="text" @click="dianzhan">
              <van-icon name="good-job" size="5.83333vw" color="#757575" />
              <div>
                点赞
              </div>
            </div>
          </div>
          <div>
            <div
              class="text"
              @click="collections"
              :class="{ active: collectionActive }"
            >
              <span
                class="icon-star-full"
                :class="{ active: collectionActive }"
              ></span>
              <div class="two">
                收藏
              </div>
            </div>
          </div>
          <div>
            <div
              class="text"
              @click="follows"
              :class="{ active: followActive }"
            >
              <span
                class="icon-bubble"
                :class="{ active: followActive }"
              ></span>
              <div class="three">
                关注
              </div>
            </div>
          </div>
        </div>

        <div>
          <div class="text">
            <van-icon
              name="browsing-history"
              size="5.83333vw"
              color="#757575"
            />
            <div class="four">
              清晰度
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="itemDiv">
      <detail
        class="divContent"
        @click="clickItem()"
        v-for="(item, index) in this.commentList"
        :key="index"
        :itemDetail="item"
      ></detail>
    </div>
    <!--        评论区-->
    <comment-title
      ref="commentTitle"
      @commentPost="postComment"
      :dataLength="titleLength"
      :userData="userData"
    ></comment-title>
    <comment
      ref="comment"
      @postBacks="postBacks"
      @getCommentNum="(length) => (titleLength = length)"
    ></comment>
  </div>
</template>

<script>
import NavBar from "components/common/User/navbar";
import Detail from "components/common/Home/detail";
import CommentTitle from "components/common/Detail/commentTitle";
import Comment from "components/common/Detail/comment";
import { mapState } from "vuex";
export default {
  name: "Article",
  components: {
    NavBar,
    Detail,
    Comment,
    CommentTitle,
  },
  data() {
    return {
      model: null,
      activeNames: ["1"],
      commentList: [],
      titleLength: "",
      commentData: {
        comment_date: "",
        comment_content: "",
        parent_id: null,
        article_id: null,
      },
      collectionActive: "",
      followActive: "",
        zhan:false
    };
  },
  computed: {
    ...mapState(["userData"]),
  },
  methods: {
    async getArticleData() {
      const { data: res } = await this.$http.get(
        `/article/${this.$route.params.id}`,
      );
      this.model = res[0];
      if (this.model) {
        this.getFollows();
      }
      console.log(this.model);
    },
    async getCommentData() {
      const { data: res } = await this.$http.get("/commend");
      console.log(res);
      this.commentList = res;
    },
    getData() {
      this.$store.commit("getData");
    },
    async postComment(content) {
      if (content.trim() != "") {
        const date = new Date();
        let m = date.getMonth() + 1;
        let s = date.getDate();
        if (m < 10) {
          m = "0" + m;
        }
        if (s < 10) {
          s = "0" + s;
        }
        this.commentData.comment_date = `${m}-${s}`;
        this.commentData.comment_content = content;
        this.commentData.article_id = this.$route.params.id;
        const data = await this.$http.post(
          `/comment_post/${localStorage.getItem("id")}`,
          this.commentData,
        );
        console.log(data);
        if (data.status !== 200) return this.$toast.fail("发表失败");
        this.$toast.success("发表成功");
        this.$refs.comment.getComment();
        this.commentData.parent_id = null;
      }
    },
    postBacks(id) {
      this.commentData.parent_id = id;
      this.$refs.commentTitle.fouceInput();
      scrollTo(0, 990);
      console.log(id);
    },
    // 添加收藏
    async collections() {
      if (localStorage.getItem("token")) {
        const { data: res } = await this.$http.post(
          `/collection/${localStorage.getItem("id")}`,
          {
            article_id: this.$route.params.id,
          },
        );
        if (res.msg == "取消收藏成功") {
          this.collectionActive = false;
          this.$toast.success(res.msg);
        } else {
          this.collectionActive = true;
          this.$toast.success(res.msg);
        }
      }
    },
    // 获取收藏数据
    async getCollections() {
      if (localStorage.getItem("token")) {
        const { data: res } = await this.$http.get(
          `/collection/${localStorage.getItem("id")}`,
          {
            params: {
              article_id: this.$route.params.id,
            },
          },
        );
        this.collectionActive = res.success;
      }
    },
    // 添加关注
    async follows() {
      if (localStorage.getItem("token")) {
        const { data: res } = await this.$http.post(
          `/sub_scription/${localStorage.getItem("id")}`,
          {
            sub_id: this.model.userid,
          },
        );
        if (res.msg == "关注成功") {
          this.followActive = true;
          this.$toast.success(res.msg);
        } else {
          this.followActive = false;
          this.$toast.success(res.msg);
        }
      }
    },
    // 获取关注数据
    async getFollows() {
      if (localStorage.getItem("token")) {
        const { data: res } = await this.$http.get(
          `/sub_scription/${localStorage.getItem("id")}`,
          {
            params: {
              sub_id: this.model.userid,
            },
          },
        );
        this.followActive = res.success;
      }
    },
      // 点赞
      dianzhan(){
        this.zhan = !this.zhan
      }
  },
  watch: {
    $route() {
      this.getArticleData();
      this.getCommentData();
      this.getCollections();
      scrollTo(0, 0);
    },
  },
  created() {
    this.getArticleData();
    this.getCommentData();
    this.getData();
    this.getCollections();
  },
};
</script>

<style scoped lang="less">
.article {
  background-color: white;
  overflow-x: hidden;
}
.videos {
  width: 100%;
  video {
    width: 100%;
  }
}
.button {
  height: 9.6vw;
  width: 93.6vw;
  line-height: 9.6vw;
  background: #fb7299;
  border: none;
  border-radius: 4.8vw;
  font-size: 3.83333vw;
  text-align: center;
  margin: 3vw auto 0;
  margin-bottom: 10px;
  a {
    color: #fff;
  }
}
.name {
  font-size: 4.26667vw;
  font-weight: 400;
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #212121;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 86.66667vw;
  height: 6.4vw;
  line-height: 6.4vw;
}
.detail {
  display: flex;
  justify-content: space-between;
  width: 82%;
  margin-top: -2.581vw;
  .username {
    color: black;
  }
  img {
    width: 5.484vw;
    height: 5.484vw;
    margin-top: 3.387vw;
  }
  span {
    vertical-align: middle;
    font-size: 3.2vw;
    margin-top: 2.13333vw;
    color: #999;
  }
}
.contentDown {
  font-size: 3.5vw;
  color: #999;
  line-height: 4.8vw;
  p {
    margin: 1.613vw -1.613vw;
  }
}
.van-tag {
  padding: 3vw 5vw;
  font-size: 3.2vw;
  margin: 1.29vw 1.613vw;
}
.tags {
  margin: 2.581vw 0;
}
.tags span {
  color: #fb7299;
  margin-right: 1.33333vw;
}
.utils {
  padding-left: 4.839vw;
  width: 92%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .utilsnei {
    width: 55%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .text {
    font-size: 3.548vw;
    div {
      display: inline;
      vertical-align: 50%;
    }
    .two {
      vertical-align: 33%;
      padding: 0;
    }
    .three {
      vertical-align: 35%;
    }
    .four {
      vertical-align: 50%;
    }
  }
}
.icons {
  margin-top: 0.645vw;
}
.warning {
  vertical-align: 14%;
}
.itemDiv {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  .divContent {
    margin: 1.613vw 0;
    width: 45%;
  }
}
.active {
  color: #fb7299;
}
</style>
